﻿<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <!-- Meta -->
    <meta name="description" content="茅台·天津 | 活动登记系统."/>
    <meta name="author" content="WY"/>

    <link rel="shortcut icon" th:href="@{/picture/favicon.ico}" type="image/x-icon"/>
    <title>茅台·天津 | 活动登记系统</title>

    <!-- vendor css -->
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link th:href="@{/css/ionicons.css}" rel="stylesheet"/>
    <link th:href="@{/css/perfect-scrollbar.css}" rel="stylesheet"/>
    <link th:href="@{/css/github.css}" rel="stylesheet"/>
    <link th:href="@{/css/select2.min.css}" rel="stylesheet"/>

    <!-- Starlight CSS -->
    <link rel="stylesheet" th:href="@{/css/starlight.css}"/>
</head>

<body>

<!-- ########## START: LEFT PANEL ########## -->
<div class="sl-logo"><a href=""><img th:src="@{/picture/mt_logo_wh.jpg}" style="width: 30px; height: 30px;"/> <span
        style="font-size: 18px">茅台·活动登记系统</span></a></div>
<div class="sl-sideleft">

    <label class="sidebar-label">导航栏</label>
    <div class="sl-sideleft-menu">
        <a th:href="@{/activity/list}" class="sl-menu-link">
            <div class="sl-menu-item">
                <i class="menu-item-icon icon ion-ios-paper-outline tx-20"></i>
                <span class="menu-item-label">活动项列表</span>
            </div><!-- menu-item -->
        </a><!-- sl-menu-link -->
        <a th:href="@{/activityForm}" th:if="${user.isManagement} eq 2" class="sl-menu-link active">
            <div class="sl-menu-item">
                <i class="menu-item-icon icon ion-ios-paper-outline tx-20"></i>
                <span class="menu-item-label">新增活动项目</span>
            </div><!-- menu-item -->
        </a><!-- sl-menu-link -->
        <a th:href="@{/saleRecordForm}" class="sl-menu-link">
            <div class="sl-menu-item">
                <i class="menu-item-icon icon ion-ios-photos-outline tx-20"></i>
                <span class="menu-item-label">新增销售记录</span>
            </div><!-- menu-item -->
        </a><!-- sl-menu-link -->
        <a href="#" class="sl-menu-link" th:if="${user.isManagement} eq 2 or ${user.isManagement} eq 1">
            <div class="sl-menu-item">
                <i class="menu-item-icon icon ion-ios-gear-outline tx-24"></i>
                <span class="menu-item-label">用户管理</span>
                <i class="menu-item-arrow fa fa-angle-down"></i>
            </div><!-- menu-item -->
        </a><!-- sl-menu-link -->
        <ul class="sl-menu-sub nav flex-column" th:if="${user.isManagement} eq 2 or ${user.isManagement} eq 1">
            <li class="nav-item"><a th:href="@{/user/initUser}" class="nav-link">添加用户</a></li>
            <li class="nav-item"><a th:href="@{/user/list}" class="nav-link">用户列表</a></li>
        </ul>
        <a th:href="@{/about}" class="sl-menu-link">
            <div class="sl-menu-item">
                <i class="menu-item-icon icon ion-ios-bookmarks-outline tx-20"></i>
                <span class="menu-item-label">关于</span>
            </div><!-- menu-item -->
        </a><!-- sl-menu-link -->
    </div><!-- sl-sideleft-menu -->
</div><!-- sl-sideleft -->
<!-- ########## END: LEFT PANEL ########## -->

<!-- ########## START: HEAD PANEL ########## -->
<div class="sl-header">
    <div class="sl-header-left">
        <div class="navicon-left hidden-md-down"><a id="btnLeftMenu" href=""><i class="icon ion-navicon-round"></i></a>
        </div>
        <div class="navicon-left hidden-lg-up"><a id="btnLeftMenuMobile" href=""><i class="icon ion-navicon-round"></i></a>
        </div>
    </div><!-- sl-header-left -->
    <div class="sl-header-right">
        <nav class="nav">
            <div class="dropdown">
                <a href="" class="nav-link nav-link-profile" data-toggle="dropdown">
                    <span class="logged-name" th:text="${user.companyShortName} + ' | ' + ${user.name}">海津皇冠 | 皇冠</span>
                    <img th:src="@{/picture/mt_logo_wh.jpg}" class="wd-32 rounded-circle" alt=""/>
                </a>
                <div class="dropdown-menu dropdown-menu-header wd-200">
                    <ul class="list-unstyled user-profile-nav">
                        <li><a href=""><i class="icon ion-ios-person-outline"></i> Edit Profile</a></li>
                        <li><a href=""><i class="icon ion-ios-gear-outline"></i> Settings</a></li>
                        <li><a href=""><i class="icon ion-ios-download-outline"></i> Downloads</a></li>
                        <li><a href=""><i class="icon ion-ios-star-outline"></i> Favorites</a></li>
                        <li><a href=""><i class="icon ion-ios-folder-outline"></i> Collections</a></li>
                        <li><a href=""><i class="icon ion-power"></i> Sign Out</a></li>
                    </ul>
                </div><!-- dropdown-menu -->
            </div><!-- dropdown -->
        </nav>
        <div class="navicon-right">

        </div><!-- navicon-right -->
    </div><!-- sl-header-right -->
</div><!-- sl-header -->
<!-- ########## END: HEAD PANEL ########## -->

<!-- ########## START: RIGHT PANEL ########## -->

<!-- ########## END: RIGHT PANEL ########## -->

<!-- ########## START: MAIN PANEL ########## -->
<div class="sl-mainpanel">
    <nav class="breadcrumb sl-breadcrumb">
        <a class="breadcrumb-item" href="index.html">茅台销售登记系统</a>
        <span class="breadcrumb-item active">新增活动项目</span>
    </nav>

    <div class="sl-pagebody">
        <!-- <div class="sl-page-title">
          <h5>Form Layouts</h5>
          <p>Forms are used to collect user information with different element types of input, select, checkboxes, radios and more.</p>
        </div> -->
        <!-- sl-page-title -->

        <div class="card pd-20 pd-sm-40 form-layout form-layout-4">
            <h6 class="card-body-title">新增活动项目</h6>
            <p class="mg-b-20 mg-sm-b-30">Add activity.</p>

            <form th:action="@{/activity}" method="post" id="addCustForm" onsubmit="return valiForm();">
                <div class="row">
                    <label class="col-sm-1 form-control-label"> 活动名称:<span
                            class="tx-danger">*</span></label>
                    <div class="col-sm-3 mg-t-10 mg-sm-t-0">
                        <input type="text" class="form-control" placeholder="请输入活动名称" name="name"
                               onblur="validateName()"/>
                        <span class="col-sm-12 mt-t-10 mg-sm-t-0 form-control-label" style="color: red; font-size:12px;"
                              id="nameInfo"/>
                    </div>
                </div><!-- row -->
                <div class="row mg-t-20">
                    <label class="col-sm-1 form-control-label"> 活动时间:<span class="tx-danger">*</span></label>
                    <div class="col-sm-3 mg-t-10 mg-sm-t-0">
                        <input type="text" class="form-control" placeholder="请选择活动时间段" name="time" id="time"/>
                        <span class="col-sm-12 mt-t-10 mg-sm-t-0 form-control-label" style="color: red; font-size:12px;"
                              id="timeInfo"/>
                    </div>
                </div><!-- row -->
                <div class="row mg-t-20">
                    <label class="col-sm-1"> 活动详情:<span class="tx-danger">*</span></label>
                    <div class="col-sm-5 mg-t-10 mg-sm-t-0">
                        <textarea rows="5" class="form-control" placeholder="请输入活动详情信息(如活动目的、意义，活动促销产品的品类、规格、数量等活动信息)" name="remark" onblur="valiDel();"></textarea>
                        <span class="col-sm-12 mt-t-10 mg-sm-t-0 form-control-label" style="color: red; font-size:12px;"
                              id="marksInfo"/>
                    </div>
                </div>
                <div class="form-layout-footer mg-t-30">
                    <button class="btn btn-info mg-r-5" type="submit">确认添加</button>
                    <button class="btn btn-secondary" type="reset">清&nbsp;&nbsp;&nbsp;&nbsp;空</button>
                </div><!-- form-layout-footer -->
            </form>
        </div><!-- card -->
    </div><!-- sl-pagebody -->
    <footer class="sl-footer">
        <div class="footer-left">
            <div class="mg-b-2">Copyright &copy; 2018. 天津海津皇冠贸易有限公司. All Rights Reserved.</div>
        </div>
        <div class="footer-right d-flex align-items-center">Made by 海津皇冠.</div>
    </footer>
</div><!-- sl-mainpanel -->


<!-- ########## END: MAIN PANEL ########## -->

<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/popper.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/js/jquery-ui.js}"></script>
<script th:src="@{/js/perfect-scrollbar.jquery.js}"></script>
<script th:src="@{/js/highlight.pack.js}"></script>
<script th:src="@{/js/select2.min.js}"></script>
<script th:src="@{/laydate/laydate.js}"></script>

<script th:src="@{/js/starlight.js}"></script>
<script>
    $(function () {
        'use strict';

    });

    laydate.render({
        elem: '#time'
        ,range: true
    });
</script>

<script th:inline="javascript">

    /*<![CDATA[*/

    // 验证用户名是否为空
    function validateName() {
        var name = $('input[name="name"]');
        var nameInfo = $("#nameInfo");
        nameInfo.html("");
        if (name.val() == null || ($.trim(name.val())) == "") {
            nameInfo.html("活动名称不能为空！");
            name.addClass("is-invalid");
            return false;
        } else {
            name.removeClass("is-invalid");
        }
        return true;
    }

    // 验证活动时间段是否为空
    function valiTime() {
        var time = $('input[name="time"]');
        var timeInfo = $("#timeInfo");
        timeInfo.html("");
        if (time.val() == null || ($.trim(time.val()) == "")) {
            timeInfo.html("活动时间段不能为空！");
            time.addClass("is-invalid");
            return false;
        } else {
            time.removeClass("is-invalid");
        }
        return true;
    }

    // 验证活动详情是否为空
    function valiDel() {
        var remark = $('textarea[name="remark"]');
        var marksInfo = $("#marksInfo");
        marksInfo.html("");
        if (remark.val() == null || ($.trim(remark.val()) == "")) {
            marksInfo.html("活动详情信息不能为空！");
            remark.addClass("is-invalid");
            return false;
        } else {
            remark.removeClass("is-invalid");
        }
        return true;
    }


    function valiForm() {
        if (validateName() && valiTime() && valiDel()) {
            return true;
        } else {
            validateName();
            valiTime();
            valiDel();
            return false;
        }
    }

    /*]]>*/

</script>
</body>
</html>
